<script setup>

import CardNews from '../components/CardNews.vue';
import Temp from '../components/Temp.vue';

const props =  defineProps({
    msg: {
        type: String,
        required: true
    },
    data: {
        type: Object,
        required: false,
        default (){
        return [
            {title: '质量控制', url: '/',image:'/src/assets/Rectangle_19.png',infor:'SAR拥有先进的生产设备和高精准的检测技术，管控阀门的额每个细节'},
            {title: '资质证书', url: '/',image:'/src/assets/Rectangle_19.png',infor:'HYV已通过API和ISO的体系认证和相关生产认证，为你提供更标准化全工业阀门'},
            {title: '铸造支持', url: '/',image:'/src/assets/Rectangle_19.png',infor:'文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文'},
            {title: '售后服务', url: '/',image:'/src/assets/Rectangle_19.png',infor:'萨尔坚持追求卓越、永不止步的质量方针，以顾客至上，用户满意为服务宗旨，通过持续提高管理水平，不断完善质量保证和售后服务体系'},
        ]
        }
    }
})
</script>

<template>
    <Temp lit=[0]>
        <div class="w-full h-screen bg-white bg-cover" style="background-image: url(/src/assets/image_5.jpg);">
            <div class="w-full h-screen overflow-hidden bg-black/60 flex items-center mobile:block">
                <div class="wen-card w-full h-full mobile:h-auto  mobile:inline-block relative text-white duration-500 hover:bg-dominant/80 mobile:first:pt-20 mobile:pb-16 mobile:p-4" v-for="(item,index) in data" >
                    <div class="w-full px-[48px] mobile:p-2 mobile:pr-12 z-[1] relative text-left items-center translate-y-full mobile:translate-y-0">
                        <h3 class="text-5xl mb-8 mobile:text-xl font-medium mobile:mb-3 wow animate__animated animate__fadeInUp timing"><a :href="data.url">{{ item.title }}</a></h3>
                        <p class="text-2xl w-full h-[168px] mobile:h-auto text-white/80 mobile:text-sm overflow-hidden  mobile:line-clamp-2 leading-[42px] wow animate__animated animate__fadeInUp timing"><a :href="item.url">{{ item.infor }}</a></p>
                        <div class="flex text-2xl mt-[100px] text-white/80 mobile:mt-6 leading-base font-medium wen-opacity mobile:!opacity-1 mobile:absolute mobile:right-3 mobile:bottom-0"><span class="text-2xl mobile:text-sm mobile:hidden">查看详情</span>
                            <div class="inline-block p-1 mobile:p-0">
                                <img class="w-full w-6 h-6" src="/src/assets/fa_angle_right_2.svg" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </Temp>
</template>
<style scoped>
.wen-card{
    box-shadow: 0 0 5px #fff1;
}
.wen-card:hover,.wen-card.active{
    background-color: rgba(47, 55, 103, 0.8);
    box-shadow: 0 0 5px #fff3;
}
.wen-card .wen-opacity{
    opacity: 0;
}
.wen-card:hover .wen-opacity, .wen-card.active .wen-opacity{
    opacity: 1;
}

@media (max-width: 768px) {
    .wen-card .wen-opacity{
        opacity: 1;
    }
}
</style>